<template>
	<view class="container p-bottom" v-if="goodsList.length && formData.length">
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
				<!-- 商品详情 -->
				<view class="goods-detail dis-flex flex-dir-row">
					<view class="left"><image class="goods-image" :src="item.image.file_path"></image></view>
					<view class="right dis-flex flex-box flex-dir-column flex-x-around">
						<text class="twolist-hidden">{{ item.goods_name }}</text>
						<text class="">￥{{ item.goods_price }}</text>
					</view>
				</view>

				<!-- 选择评价 -->
				<view class="score-row dis-flex flex-x-around">
					<view @tap="setScore" class="score-item score__praise dis-flex flex-y-center flex-x-center " :class="{ __active: formData[index].score == 10 }" :data-index="index" data-score="10">
						<view class="score">
							<text class="score__icon iconfont icon-haoping"></text>
							<text class="score__text">好评</text>
						</view>
					</view>
					<view @tap="setScore" class="score-item score__review dis-flex flex-y-center flex-x-center" :class="{ __active: formData[index].score == 20 }" :data-index="index" data-score="20">
						<view class="score">
							<text class="score__icon iconfont icon-zhongping"></text>
							<text class="score__text">中评</text>
						</view>
					</view>
					<view @tap="setScore" class="score-item score__negative dis-flex flex-y-center flex-x-center" :class="{ __active: formData[index].score == 30 }" :data-index="index" data-score="30">
						<view class="score">
							<text class="score__icon iconfont icon-chaping"></text>
							<text class="score__text">差评</text>
						</view>
					</view>
				</view>

				<!-- 评价内容 -->
				<view class="dis-flex content-row"><textarea v-model="formData[index].content" :data-index="index" maxlength="2000" placeholder="请输入评价内容 (留空则不评价)" placeholderStyle="color:#ccc"></textarea></view>

				<!-- 图片列表 -->
				<view class="image-list">
					<view class="image-preview" v-for="(imagePath, imageIndex) in formData[index].image_list" :key="imageIndex">
						<text class="image-delete iconfont icon-shanchu" @tap="deleteImage" :data-index="index" :data-image-index="imageIndex"></text>
						<image mode="aspectFill" :src="imagePath"></image>
					</view>
					<view @tap="chooseImage" class="image-picker dis-flex flex-dir-column flex-x-center flex-y-center" :data-index="index" v-if="!formData[index].image_list || formData[index].image_list.length < 6">
						<text class="choose__icon iconfont icon-tubiao_xiangji"></text>
						<text class="choose__text">上传图片</text>
					</view>
				</view>
			</view>
		</view>

		<view class="flow-fixed-footer b-f">
			<view class="flow-btn f-32"><view @tap="submit">确认提交</view></view>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import Route from '@/utils/Route.js';
export default {
	data() {
		return {
			// 页面参数
			options: null,

			// 待评价商品列表
			goodsList: [],

			// 表单数据
			formData: [],
			submitDisable: false
		};
	},

	onLoad(options) {
		// 记录页面参数
		this.options = options;

		// 获取待评价商品列表
		this.getGoodsList();
	},
	methods: {
		/**
		 * 获取待评价商品列表
		 */
		getGoodsList() {
			this.$get(this.$api.userCommentOrder, { order_id: this.options.order_id }, res => {
				let goodsList = res.data.goodsList;
				this.goodsList = goodsList;
				this.formData = this.initFormData(goodsList);
			});
		},
		/**
		 * 初始化form数据
		 */
		initFormData(goodsList) {
			let data = [];
			goodsList.forEach(item => {
				data.push({
					goods_id: item.goods_id,
					order_goods_id: item.order_goods_id,
					score: 10,
					content: '',
					image_list: [
						// 'http://tmp/wxe1997e687ecca54e.o6zAJs38WC0RISx_rydS4v4D778c.VzVJOgmUHlH3fd47776794bd803898289bebee12d94c.jpg',
						// 'http://tmp/wxe1997e687ecca54e.o6zAJs38WC0RISx_rydS4v4D778c.u8PUZLBNG2ELa7692fe0b9dfebf762cf0cb3677a42d7.jpg',
						// 'http://tmp/wxe1997e687ecca54e.o6zAJs38WC0RISx_rydS4v4D778c.8PjhMmysqokY55a19834d4135fbf72d4e653010d375e.jpg'
					],
					uploaded: []
				});
			});
			return data;
		},
		/**
		 * 设置评分
		 */
		setScore(e) {
			let dataset = e.currentTarget.dataset;
			this.$set(this.formData[dataset.index], 'score', dataset.score);
		},
		/**
		 * 选择图片
		 */
		chooseImage: function(e) {
			let index = e.currentTarget.dataset.index;
			console.log(index);
			let imageList = this.formData[index].image_list;
			// 选择图片
			uni.chooseImage({
				count: 6 - imageList.length,
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: res => {
					this.$set(this.formData[index], 'image_list', imageList.concat(res.tempFilePaths));
				}
			});
		},
		/**
		 * 删除图片
		 */
		deleteImage(e) {
			let dataset = e.currentTarget.dataset;
			this.formData[dataset.index].image_list.splice(dataset.imageIndex, 1);
		},
		/**
		 * 表单提交
		 */
		submit() {
			let formData = this.formData;

			// 判断是否重复提交
			if (this.submitDisable === true) {
				return false;
			}
			// 表单提交按钮设为禁用 (防止重复提交)
			this.submitDisable = true;

			uni.showLoading({
				title: '正在处理...',
				mask: true
			});

			// form提交执行函数
			let fromPostCall = formData => {
				console.log('fromPostCall');
				console.log(formData);
				this.$post(
					this.$api.userCommentOrder,
					{
						order_id: this.options.order_id,
						formData: JSON.stringify(formData)
					},
					res => {
						if (res.code === 1) {
							Tools.showSuccess(res.msg, function() {
								Route.navigateBack();
							});
						} else {
							Tools.showError(res.msg);
						}
					},
					false,
					() => {
						uni.hideLoading();
						this.submitDisable = false;
					}
				);
			};

			// 统计图片数量
			let imagesLength = 0;
			formData.forEach((item, formIndex) => {
				item.content !== '' && (imagesLength += item.image_list.length);
			});
			console.log(imagesLength);

			// 判断是否需要上传图片
			imagesLength > 0 ? this.uploadFile(imagesLength, formData, fromPostCall) : fromPostCall(formData);
		},
		uploadFile(imagesLength, formData, callBack) {
			// 文件上传
			let i = 0;
			formData.forEach((item, formIndex) => {
				if (item.content !== '') {
					item.image_list.forEach((filePath, fileKey) => {
						this.$upload(
							this.$api.uploadImage,
							filePath,
							fileKey,
							{},
							res => {
								item.uploaded[fileKey] = res.data.file_id;
							},
							null,
							() => {
								i++;
								if (imagesLength === i) {
									// 所有文件上传完成
									console.log('upload complete');
									// 执行回调函数
									callBack && callBack(formData);
								}
							}
						);
					});
				}
			});
		}
	}
};
</script>

<style>
.goods-list {
	border-top: 1rpx solid #e3e3e3;
	font-size: 28rpx;
}

.goods-item {
	margin-bottom: 30rpx;
	border-bottom: 1rpx solid #e3e3e3;
	background: #fff;
}
.goods-item .goods-detail {
	padding: 24rpx 20rpx;
}
.goods-item .goods-detail .left .goods-image {
	display: block;
	width: 150rpx;
	height: 150rpx;
}
.goods-item .goods-detail .right {
	padding-left: 20rpx;
}
.goods-item .score-row {
	padding: 24rpx 20rpx;
}
.goods-item .score-row .score-item.score__praise {
	color: #ff4544;
}
.goods-item .score-row .score-item.score__praise .score__icon {
	background: #ff4544;
}
.goods-item .score-row .score-item.score__review {
	color: #fcb500;
}
.goods-item .score-row .score-item.score__review .score__icon {
	background: #fcb500;
}
.goods-item .score-row .score-item.score__negative {
	color: #9b9b9b;
}
.goods-item .score-row .score-item.score__negative .score__icon {
	background: #9b9b9b;
}
.goods-item .score-row .score-item .score {
	padding: 10rpx 20rpx 10rpx 10rpx;
	border-radius: 30rpx;
}
.goods-item .score-row .score-item .score .score__icon {
	margin-right: 10rpx;
	padding: 10rpx;
	border-radius: 50%;
	font-size: 30rpx;
	color: #fff;
}
.goods-item .score-row .score-item.__active .score {
	color: #fff;
}
.goods-item .score-row .score-item.__active.score__praise .score {
	background: #ff4544;
}
.goods-item .score-row .score-item.__active.score__review .score {
	background: #fcb500;
}
.goods-item .score-row .score-item.__active.score__negative .score {
	background: #9b9b9b;
}
.goods-item .content-row {
	padding: 10rpx 20rpx;
}
.goods-item .content-row textarea {
	width: 100%;
	height: 220rpx;
	padding: 12rpx;
	border: 1rpx solid #e8e8e8;
	border-radius: 5rpx;
	box-sizing: border-box;
}
.goods-item .image-list {
	padding: 24rpx 20rpx;
}
.goods-item .image-list:after {
	clear: both;
	content: ' ';
	display: table;
}
.goods-item .image-list image {
	display: block;
	width: 150rpx;
	height: 150rpx;
}
.goods-item .image-list .image-picker {
	width: 150rpx;
	height: 150rpx;
	border: 1rpx dashed #ccc;
	color: #ccc;
}
.goods-item .image-list .image-picker .choose__icon {
	font-size: 56rpx;
	margin-bottom: 6rpx;
}
.goods-item .image-list .image-picker .choose__text {
	font-size: 22rpx;
}
.goods-item .image-list .image-picker,
.goods-item .image-list .image-preview {
	margin-right: 30rpx;
	margin-top: 30rpx;
	float: left;
}
.goods-item .image-list .image-picker:nth-child(4n + 0),
.goods-item .image-list .image-preview:nth-child(4n + 0) {
	margin-right: 0;
}
.goods-item .image-list .image-preview {
	position: relative;
}
.goods-item .image-list .image-preview .image-delete {
	position: absolute;
	top: -15rpx;
	right: -15rpx;
	height: 42rpx;
	width: 42rpx;
	line-height: 42rpx;
	background: rgba(0, 0, 0, 0.64);
	border-radius: 50%;
	color: #fff;
	font-weight: bolder;
	font-size: 22rpx;
	z-index: 10;
	text-align: center;
}

/*# sourceMappingURL=comment.wxss.map */
</style>
